<template>
  <div class="app-container">
    <el-row>
      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span><i class="el-icon-star-off"></i>柱状图</span></div>
          <!--放图表控件 -->
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="BarchartTest" :style="{height:'420px',width:'300px'}" />
          </div>
        </el-card>
      </el-col>

      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span><i class="el-icon-star-off"></i>折线图</span></div>
          <!--放图表控件 -->
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="LineChartTest" style="height:420px" />
          </div>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons') // echarts theme
//import resize from './mixins/resize'

const animationDuration = 1000

export default {

  data() {
    return {
      //柱状图
      BarChartTest:null,
      //折线图
      LineChartTest:null
    }
  },
  mounted() {
    this.$nextTick(() => { //这个函数作用使得dom元素生成后再操作节点
      this.getChartList()
    })
  },
/*  created() {
    this.getChartList();
  },*/
  methods:{
    /**获取数据生成柱状图 **/
    getChartList(){
      this.BarChartTest = echarts.init(this.$refs.BarchartTest,"macarons");
      this.BarChartTest.setOption({
        /** 提示框组件**/
        tooltip:{
          trigger:'axis',
          axiosPointer:{// 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {   //grid是直角坐标系内的网格
          top: 10,     //离容器上侧距离
          left: '2%',//
          right: '2%',
          bottom: '3%',//离下侧距离
          containLabel: true
        },
        xAxis:[{
          type:'category',
          data:['Mon','Tue','Wed'], //类目数
          axisTick:{
            alignWithLabel:true //坐标轴刻度设置
          }
        }],
        yAxis:[{
          type: 'value',
          axisTick:{
            show :false
          }
        }],
        //最关键的数据部分
        series:[{
          name: 'test' , //图例名称 回显到tooltip中
          type: 'bar',
          barWidth :'60%', //自适应宽度
          //这里是特别的 因为x轴指定了离散数据 所以此处本应当二维数组可简化为一维，填充y轴
          data: [20,30,25],
          animationDuration
        }]
      });
      //以下是折线图
      this.LineChartTest = echarts.init(this.$refs.LineChartTest,'macarons');
      this.LineChartTest.setOption({
        legend: { //图例的数据数组 一个值对应一个series
          data: ['expected', 'actual']
        },
        xAxis: {
          data: ['Mon', 'Tue', 'Wed'],
          boundaryGap: false, //坐标轴两边留白策略 false为不留白 数据连续
          axisTick: {
            show: false
          }
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 30,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross' //坐标轴十字指示器
          },
          padding: [5, 10] //提示框浮层内边距 上下5 左右10
        },
        yAxis: {
          axisTick: {
            show: false
          }
        },
        series:[{
          name: 'expected', itemStyle: { //itemStyle：拐点标志样式
            normal: {
              color: '#FF005A',
              lineStyle: {
                color: '#FF005A',
                width: 2
              }
            }
          },
          smooth: true, //是否平滑曲线展示
          type: 'line',
          data: [20,30,50],
          animationDuration: 2800,
          animationEasing: 'cubicInOut' //初始动画缓动效果
        },
          {
            name: 'actual',
            smooth: true,
            type: 'line',
            itemStyle: {
              normal: {
                color: '#3888fa',
                lineStyle: { //区域填充样式 展示为面积
                  color: '#3888fa',
                  width: 2
                },
                areaStyle: {
                  color: '#f3f8ff'
                }
              }
            },
            data: [15,30,45],
            animationDuration: 2800,
            animationEasing: 'quadraticOut'
          }]
      });
    }
  }
}
</script>

